<template>
  <div class="addEditDialog">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%" @close="closeDialog">
      <el-form :model="ruleForm" :rules="rules" ref="ruleFormref" label-width="100px" class="demo-ruleForm">
        <el-form-item prop="systemName" label="系统名称:">
          <el-input v-model="ruleForm.systemName" clearable placeholder="请输入系统名称">
            
          </el-input>         
        </el-form-item>         
         <el-form-item  prop="remark" label="备注" >           
            <el-input type="textarea" v-model="ruleForm.remark"></el-input>        
        </el-form-item>              
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleFormref')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: 'showImg',
  data () {
    return {  
    title:null,   
      url:'',
      ruleForm: {
          thirdPartyId:null, 
          systemName:null,          
          remark:null          
        },   
      dialogVisible: false,           
      rules: {
        systemName: [
          { required: true, message: '不能为空', trigger: 'blur' }         
        ],
            
      },
       
    }
  },
  methods: { 
    closeDialog(){

    },
    loadDialogData(item,title,url){     
      this.dialogVisible=true; 
   
      setTimeout(() => {
        this.title=title;
        this.url=url;            
        this.$refs['ruleFormref'].resetFields(); //重置  弹窗数据 
        this.ruleForm.systemName=item.thirdPartySystemDTO.systemName;                 
        this.ruleForm.thirdPartyId=item.thirdPartySystemDTO.thirdPartyId;      
        this.ruleForm.remark=item.thirdPartySystemDTO.remark;  
      }, 10);         
    },
    submitForm(formName) {     
     
        this.$refs[formName].validate((valid) => {
          if (valid){     
                                                                                             
              this.$store.dispatch('postform',{param:this.ruleForm,url:this.url}).then(() => {
                if(this.addEdit.code==0){
                  this.$message({
                    message: this.addEdit.msg,
                    type: 'success'
                  });               
                  this.dialogVisible=false;  
                       
                  this.$emit('fatherMethod'); 
                }else{
                   this.$message({
                    message: this.addEdit.msg,
                    type: 'warning'
                  }); 
                }              
              }).catch(() => {
                   this.$message({
                    message: this.addEdit.msg,
                    type: 'error'
                  }); 
                  
              })                        
          } else {            
            return false;
          }
        });
      },
  
  },
  computed:{
    
    ...mapState(['list','addEdit'])
  },
  mounted(){   
      
        
  }
}
</script>

<style scoped>
.addEditDialog .el-select{
  width: 100%
}

</style>
<style>
  
</style>
